import React, { useEffect, useState } from 'react';
import '@/views/Index/Swiper/Swiper.scss'
import Nav from '../../../components/Nav/Nav'
import service from '../../../api/index'
import { useNavigate } from "react-router-dom";
import type { ColumnsType } from 'antd/es/table';

import { Table, Button, message } from 'antd';
import { PlusOutlined, DownloadOutlined, DeleteOutlined } from '@ant-design/icons';


interface Props {

}

interface DataType {
    img: string;
    link: string;
    alt: string;
    bannerid: string;
}

function Swiper(props: Props) {

    let navigate = useNavigate()
    // 产品总数量
    let [total, setTotal] = useState()
    // 表格数据源
    let [dataSource, setDateSource] = useState<DataType[]>([])

    // 表格头部
    const columns: ColumnsType<DataType> = [
        {
            title: '序号', //表格列的标题
            // dataIndex: 'order', //数据索引( 属性名 )
            // key: 'order',
            width: '10%',
            align: 'center',
            render: (_, record) => <a>{dataSource.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },
        {
            title: '图片',
            dataIndex: 'img',
            key: 'img',
            width: '25%',
            align: 'center',
            render: (_, record) => <img src={record.img} style={{ maxWidth: '80%' }} />,
        },
        {
            title: '链接',
            dataIndex: 'link',
            key: 'link',
            width: '25%',
            ellipsis: true,
            align: 'center',
        },
        {
            title: '提示',
            dataIndex: 'alt',
            key: 'alt',
            width: '20%',
            align: 'center',
        },
        {
            title: '操作',
            // dataIndex: 'make', 
            // key: 'make',
            width: '20%',
            align: 'center',
            render: (_, record) => <Button className='remove' type="primary" danger onClick={() => { swiperDelete(record.bannerid) }} >Delete</Button>,
        },
    ];

    // 发请求
    useEffect(() => {
        bannerlist()
    }, [])

    // 发送轮播图列表请求
    let bannerlist = async (payload = {}) => {
        let res = await service.banner.banner_list(payload)
        // console.log(res.data);
        if (res.data.code == '200') {
            // 给数据添加key属性
            res.data.data.map((item: any) => {
                item.key = item.bannerid
            })
            setDateSource(res.data.data)
            setTotal(res.data.data.length)
        }

    }

    let code = (res: any) => {
        if (res.data.code == '200') {
            message.success({
                content: res.data.message,
                style: {
                    marginTop: '20vh',
                },
            })
            bannerlist()
        } else {
            message.error({
                content: res.data.message,
                style: {
                    marginTop: '20vh',
                },
            })
        }
    }
    // 添加轮播图
    let toSwiperAdd = () => {
        navigate('/index/swiper_add')
    }

    // 删除单条数据
    let swiperDelete = async (bannerid: any) => {
        let res = await service.banner.banner_delete({ bannerid })
        // console.log(res.data);
        code(res)
    }
    // 删除全部数据
    let swiperRemoveall = async () => {
        let res = await service.banner.banner_removeall()
        // console.log(res.data);
        code(res)
    }
    // 分页设置
    let pageChange = (page: any, pageSize: any) => {
        // console.log(page, pageSize);
        bannerlist({ count: page, limitNum: pageSize })
    };
    return (
        <div className='swiper'>
            <Nav />
            <div className="list">
                <div className="btn">
                    <Button className='add btn_item' type="primary" onClick={toSwiperAdd}>
                        添加轮播图<PlusOutlined />
                    </Button>
                    <Button className='export btn_item' type="primary">
                        导出Excel<DownloadOutlined />
                    </Button>
                    <Button className='removeall btn_item' danger type="primary" onClick={swiperRemoveall}>
                        一键清空<DeleteOutlined />
                    </Button>
                </div>
                <Table className='table' dataSource={dataSource} columns={columns} scroll={{ y: 380 }} pagination={{
                    showSizeChanger: false,
                    onChange: pageChange,
                    defaultCurrent: 1,
                    total: total
                }} />
            </div>
        </div>
    );
}

export default Swiper;